<template>
    <view>
      <view class="demo-nav" style>

      </view>
      <view>
        <van-form style="text-align: left">
          <van-cell>
            <template #title>
              <text class="custom-title" style="height: 3rem;line-height: 3rem">企业logo</text>
            </template>
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-uploader :after-read="afterReadSupplierPic">
                <image
                  round
                  width="3rem"
                  height="3rem"
                  fit="cover"
                  :src="supplierPic"
                  v-show="supplierPic == null ? false : true"/>
                <img v-show="supplierPic == null ? true : false" src="@/assets/111.png" style="display: block;height: 3rem;width: 3rem;border-radius: 1rem">
              </van-uploader>
            </template>
          </van-cell>
          <van-field
            v-model="form.shopsName"
            type="text"
            name="企业(店铺)名称"
            label="企业(店铺)名称"
            placeholder="企业(店铺)名称"
            :rules="[{ required: true, message: '请填写企业(店铺)名称' }]"
          />


          <van-field
            v-model="form.linkMan"
            name="联系人"
            label="联系人"
            placeholder="联系人"
            :rules="[{ required: true, message: '请填写联系人' }]"
          />
          <van-field
            v-model="form.phoneNumber"
            name="联系手机号"
            label="联系手机号"
            placeholder="联系手机号"
            :rules="[{ required: true, message: '请填写联系手机号' }]"
          />

          <van-cell is-link title="位置" :value="areaTest" @click="showArea = true"/>
          <van-action-sheet v-model="showArea" title="地址">
            <van-area
              :area-list="areaList"
              :columns-placeholder="['请选择', '请选择', '请选择']"
              @cancel="cancelArea"
              @confirm = "confirmArea"
            />
          </van-action-sheet>
          <van-field
            v-model="detailedAddress"
            rows="2"
            autosize
            label="详细地址"
            type="textarea"
            placeholder="请输入详细地址"
            :rules="[{ required: true, message: '请填写供应商详细地址' }]"
          />
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <view class="custom-title">上传营业执照或负责人身份证</view>
              <!--<text class="custom-title"></text>-->
              <van-uploader style="margin-left: 0.8rem" v-model="fileList" multiple :max-count="1" :deletable ="false" :after-read="afterRead"/>
            </template>
          </van-cell>
          <van-cell title="是否有资质证书">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #right-icon>
              <van-radio-group v-model="qualifications" direction="horizontal">
                <van-radio name="1" shape="square" @click="qualificationsShow = true">有资质</van-radio>
                <van-radio name="2" shape="square" @click="qualificationsShow = false">无资质</van-radio>
              </van-radio-group>
            </template>
          </van-cell>
          <view v-show="qualificationsShow">
              <van-cell title="资质证书">
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #right-icon>
                  <van-uploader :after-read="afterReadQualifications">
                    <text style="color: #3a8ee6">{{QualificationsState}}</text>
                  </van-uploader>
                </template>
              </van-cell>
          </view>
          <van-field
            readonly
            clickable
            name="picker"
            label="入住版块"
            :placeholder="supplierType"
            @click="showPicker = true"
          />

          <!--<van-field v-model="supplierTypeform" name="picker" label="入住版块">-->
            <!--<template #input>-->
              <!--<van-radio-group v-model="supplierTypeform" direction="horizontal">-->
                <!--<van-radio name="1">店铺</van-radio>-->
                <!--<van-radio name="2">施工队</van-radio>-->
              <!--</van-radio-group>-->
            <!--</template>-->
          <!--</van-field>-->

          <van-popup v-model="showPicker" position="bottom">
            <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
            />
          </van-popup>


          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <text class="custom-title">业务描述及简介</text>
              <textarea
                style="border-radius: 0.5rem;border:1px solid #ccc;width: 100%"
                rows="4"
                v-model="form.supplierTypeText"
                placeholder="请输入业务描述及简介"></textarea>
            </template>
          </van-cell>
          <view align="center">
            <van-button
              type="info"
              size="large"
              style="border-radius: 0.5rem;width: 90%;"
              @click="submitApplication">提交</van-button>
          </view>
        </van-form>
      </view>
    </view>
</template>

<script>

  import areaList from '@/utils/area';
  import { uploadLicense,installSupplier,uploadCertificate,uploadSupplierPic } from '@/api/commodity/shop_product'

  export default {
    inject:['reload'],
    data(){
      return{
        valueZJ:'',
        showPickerZJ: false,
        value: '',
        supplierTypeform: '',
        columns: ['店铺', '施工队'],
        showPicker: false,
        zhengFile: [],
        fanFile: [],
        areaTest:"请选择",
        areaList,
        // 选择地区展示
        showArea:false,
        // 详细地址
        detailedAddress:null,
        form:{},
        fileList: [],
        supplierType:"店铺",
        qualifications:"2",
        // 资质证书显示状态
        qualificationsShow:false,
        // 企业logo路径
        supplierPic:null,
        // 自制上传状态
        QualificationsState:"点击上传"
      }
    },
    methods:{
      onConfirm(value) {
        this.value = value;
        this.supplierType = value;
        this.form.supplierTypeform = value;
        this.showPicker = false;
      },
      onConfirmZJ(value){
        this.valueZJ = value;
        this.showPickerZJ = false;
      },
      afterReadZheng(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
      },
      afterReadFan(file) {
        // 此时可以自行将文件上传至服务器
        console.log(file);
      },
      // 地址取消事件
      cancelArea(res){
        this.showArea = false;
      },
      // 地址确定事件
      confirmArea(res){
        this.areaTest = "";
        for (let i = 0; i < res.length; i++){
          this.areaTest += res[i].name;
        }
        this.form.address = this.areaTest;
        this.showArea = false;
      },
      afterRead(res) {
        console.log(res.file);
        let formData = new FormData();
        formData.append("licenseFile", res.file);
        uploadLicense(formData).then((res) =>{
          this.form.licenseUrl = "http://51jhf.com"+res.data.data;
        })
      },
      submitApplication(){
        console.log("提交")
        if(this.form.supplierTypeform == "店铺"){
          this.form.supplierTypeform = 1;
        }else{
          this.form.supplierTypeform = 2;
        }
        this.form.supplierType = 1;
        this.form.address = this.areaTest + this.detailedAddress;
        if(this.form.address == "请选择" || this.form.linkMan == null
          || this.form.phoneNumber == null || this.form.shopsName == null
           || this.form.supplierTypeText == null){
          Toast({
            message: "信息填写不全",
            position: "top"
          });
        }else if(this.form.licenseUrl == null){
          Toast({
            message: "请上传营业执照",
            position: "top"
          });
        }
        // else if(this.form.supplierPic == null){
        //   Toast({
        //     message: "请上传企业logo",
        //     position: "top"
        //   });
        // }
        else{
          installSupplier(this.form).then((res) =>{
            if(res.data.code == 200){
              Toast({
                message: "申请成功,请等待平台回应",
                position: "top"
              });
              this.reload();
            }else if(res.data.code == 201){
              Toast({
                message: res.data.msg,
                position: "top"
              });
            }else{
              Toast({
                message: "错误,请联系技术人员",
                position: "top"
              });
            }
          })
        }
      },
      // 上传资质证书
      afterReadQualifications(res) {
        // 此时可以自行将文件上传至服务器
        console.log(res.file);
        let formData = new FormData();
        formData.append("certificateFile", res.file);
        uploadCertificate(formData).then((res) =>{
          if(res.data.code == 200){
            Toast({
              message: "上传成功",
              position: "top"
            });
            this.QualificationsState = "上传成功";
            this.form.certificate = "http://51jhf.com"+res.data.data;
          }
        })
      },
      // 上传企业logo
      afterReadSupplierPic(res){
        this.supplierPic = res.content;
        // 此时可以自行将文件上传至服务器
        console.log(res.file);
        let formData = new FormData();
        formData.append("supplierPicFile", res.file);
        uploadSupplierPic(formData).then((res) =>{
          if(res.data.code == 200){
            Toast({
              message: "上传成功",
              position: "top"
            });
            this.form.supplierPic = "http://51jhf.com"+res.data.data;
          }
        })
      }
    }

  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 550;
    font-size: 1.3rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
</style>
